﻿<template>
  <div class="app-wrapper">
    <GlobalHeader white-bg />
    <div class="app-content-wrapper">
      <div class="detail-card">
        <div class="bread">首页 / <span class="text-[var(--ct1)]">详情页</span></div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-state">加载中...</div>

        <!-- 错误状态 -->
        <div v-else-if="error" class="error-state">加载失败，请稍后重试</div>

        <!-- 正常内容 -->
        <template v-else>
          <h1 class="title">{{ detail.title }}</h1>
          <div class="meta">{{ detail.updateTime || "-" }}</div>
          <div class="content" v-html="detail.content"></div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { useRoute } from "vue-router";
  import GlobalHeader from "@/views/service/components/GlobalHeader.vue";

  const route = useRoute();
  const contentId = route.query.id || route.query.contentId || "";

  const detail = reactive({ title: "", content: "", updateTime: "" });
  const loading = ref(false);
  const error = ref(false);

  async function loadDetail() {
    if (!contentId) {
      error.value = true;
      return;
    }

    try {
      loading.value = true;
      error.value = false;

      const res = await Api.service.GetContentDetail({ id: contentId });
      const data = res?.data ?? res;

      if (res?.code == 200 && data) {
        detail.title = data.title || data.contentName || "";
        detail.content = data.content || data.contentHtml || "";
        detail.updateTime = data.updateTime || data.updatedAt || "";
      } else {
        error.value = true;
        console.error("获取详情失败:", res?.message || "未知错误");
      }
    } catch (e) {
      error.value = true;
      console.error("获取详情失败:", e);
    } finally {
      loading.value = false;
    }
  }

  onMounted(() => {
    loadDetail();
  });
</script>

<style scoped lang="scss">
  .app-wrapper {
    width: 100vw;
    height: 100vh; /* 占满视口 */
    min-width: 1440px;
    background-color: #f0f3ff;
    background-image: url("https://qingqingrent.oss-cn-hangzhou.aliyuncs.com/backstage/xiaochengxu/helpcenter/page-bg2.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    display: flex;
    flex-direction: column;

    .app-content-wrapper {
      flex: 1;
      /* 关键：外层不滚，内部滚 */
      overflow: hidden;
      display: flex;
      justify-content: center;
      padding-top: 20px; /* 代替 margin-top，避免额外计算高度 */
    }
  }

  /* 详情卡片填满剩余高度，并让正文成为可滚区域 */
  .detail-card {
    width: 1080px;
    height: 100%; /* 填满 app-content-wrapper 高度 */
    background: var(--bg);
    border-radius: 8px;
    padding: 0 20px;
    box-shadow: 0 4px 16px rgba(71, 83, 255, 0.08);

    display: flex;
    flex-direction: column;
    min-height: 0; /* 关键：允许子元素在 flex 下被压缩，从而触发内部滚动 */
  }

  .bread,
  .title,
  .meta {
    /* 这些头部信息自然占高，不参与滚动 */
    flex: 0 0 auto;
  }

  .bread {
    color: var(--ct3);
    font-size: 14px;
    padding: 21px 0;
  }
  .title {
    font-size: 36px;
    color: #15194d;
    font-weight: 500;
    line-height: 40px;
    margin-bottom: 8px;
  }
  .meta {
    color: var(--ct3);
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cb1);
  }

  /* 正文：占满剩余空间并滚动 */
  .content {
    flex: 1 1 auto; /* 占满剩余高度 */
    min-height: 0; /* 关键 */
    overflow: auto; /* 在这里滚动 */
    margin-top: 20px;
    font-size: 16px;
    color: var(--ct1);
    line-height: 1.75;
    padding-bottom: 24px; /* 底部留点空，滚到底不顶 */
  }

  /* 正文里的媒体自适应 */
  .content :deep(img),
  .content :deep(video) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 12px auto;
    border-radius: 4px;
  }

  /*（可选）滚动条样式 */
  .content::-webkit-scrollbar {
    width: 8px;
  }
  .content::-webkit-scrollbar-thumb {
    background: #d1d4e6;
    border-radius: 4px;
  }

  /* 加载和错误状态样式 */
  .loading-state,
  .error-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--ct3);
    font-size: 16px;
  }
</style>
